﻿{include file="public/header" /}
<div class="panel admin-panel">
	<table class="table table-hover">
		<tr>
			<th width="200">{:lang('currency')['province']}</th>
			<th width="200">{:lang('currency')['city']}</th>
			<th width="200">{:lang('currency')['area']}</th>
			<th width="200">City ID</th>
			<th width="100">{:lang('label')['status']}</th>
			{if session('type') == 'all'}
			<th width="400">{:lang('label')['handle']}</th>
			{/if}
		</tr>
		{volist name="data" id="list"}
		<tr class="province" data-id="{$list.id}" type="city">
			<td style="line-height:20px">{$list.name}</td>
			<td style="line-height:20px">---</td>
			<td style="line-height:20px">---</td>
			<td style="line-height:20px">{$list.id}</td>
			<td style="line-height:20px">{if $list.status == "1"}<span class="icon-check text-sub">{:lang('currency')['status_1']}</span>{else}<span class="icon-times text-dot">{:lang('currency')['status_2']}</span>{/if}</td>
			{if session('type') == 'all'}
			<td style="line-height:20px"><a class="button border-blue button-little" href="city/status.html?type=province&id={$list.id}&status=1" onclick="event.stopPropagation();">{:lang('currency')['status_1']}</a> <a class="button border-yellow button-little" href="city/status.html?type=province&id={$list.id}&status=2" onclick="event.stopPropagation();">{:lang('currency')['status_2']}</a></td>
			{/if}
		</tr>
		{/volist}
	</table>
</div>
<script>
$('#select_del').click(function(){
	var str="";
	$("input:checkbox[name=id]:checked").each(function(){
		str+=$(this).val()+",";
	});
	if(str!=''){
		if(confirm('{:lang('currency')['del']}?')){location.href='city/del.html?id='+str;}
	}
});
$('.province').click(function(){
	var type = $(this).attr('type');
	var id = $(this).attr('data-id');
	if($(this).is('.open') == false){
		$.getJSON('/web/admin/city/ajax_get?type='+type+'&id='+id, {}, function(res){
			var tpl = $("#"+type+"_list_tpl").html(); //读取模版
			//方式一：异步渲染（推荐）
			laytpl(tpl).render(res, function(render){
				//$(this).after(render);
				$("[data-id="+id+"]").after(render);
			});
		});
		$(this).addClass('open');
	}else{
		$('[father_id='+id+']').each(function(){
			$('[father_id='+$(this).attr('data-id')+']').remove();
		});
		$('[father_id='+id+']').remove();
		$(this).removeClass('open');
	}
});
function city(obj){
	var type = $(obj).attr('type');
	var id = $(obj).attr('data-id');
	if($(obj).is('.open') == false){
		$.getJSON('/web/admin/city/ajax_get?type='+type+'&id='+id, {}, function(res){
			var tpl = $("#"+type+"_list_tpl").html(); //读取模版
			//方式一：异步渲染（推荐）
			laytpl(tpl).render(res, function(render){
				//$(this).after(render);
				$("[data-id="+id+"]").after(render);
			});
		});
		$(obj).addClass('open');
	}else{
		$('[father_id='+id+']').remove();
		$(obj).removeClass('open');
	}
}
</script>
<script id="city_list_tpl" type="text/html">
	{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
	<tr onclick="city(this)" father_id="{{ d.data[i].father_id }}" data-id="{{ d.data[i].id }}" type="area">
		<td style="line-height:20px">--- ></td>
		<td style="line-height:20px">{{ d.data[i].name }}</td>
		<td style="line-height:20px"></td>
		<td style="line-height:20px">{{ d.data[i].id }}</td>
		<td style="line-height:20px">{{# if(d.data[i].status=='1'){ }}<span class="icon-check text-sub">{:lang('currency')['status_1']}</span>{{# }else{ }}<span class="icon-times text-dot">{:lang('currency')['status_2']}</span>{{# } }}</td>
		{if session('type') == 'all'}
		<td style="line-height:20px">
			<a href="__URL__/status.html?type=city&id={{ d.data[i].id }}&status=1"><button class="button border-blue button-little">{:lang('currency')['status_1']}</button></a> <a href="__URL__/status.html?type=city&id={{ d.data[i].id }}&status=2"><button class="button border-yellow button-little">{:lang('currency')['status_2']}</button></a>
		</td>
		{/if}
	</tr>
	{{# } }}
</script>
<script id="area_list_tpl" type="text/html">
	{{# for(var i = 0, len = d.data.length; i < len; i++){ }}
	<tr father_id="{{ d.data[i].father_id }}" data-id="{{ d.data[i].id }}" type="">
		<td style="line-height:20px">--- ></td>
		<td style="line-height:20px">--- ></td>
		<td style="line-height:20px">{{ d.data[i].name }}</td>
		<td style="line-height:20px">{{ d.data[i].id }}</td>
		<td style="line-height:20px">{{# if(d.data[i].status=='1'){ }}<span class="icon-check text-sub">{:lang('currency')['status_1']}</span>{{# }else{ }}<span class="icon-times text-dot">{:lang('currency')['status_2']}</span>{{# } }}</td>
		{if session('type') == 'all'}
		<td style="line-height:20px">
			<a href="__URL__/status.html?type=area&id={{ d.data[i].id }}&status=1"><button class="button border-blue button-little">{:lang('currency')['status_1']}</button></a> <a href="__URL__/status.html?type=area&id={{ d.data[i].id }}&status=2"><button class="button border-yellow button-little">{:lang('currency')['status_2']}</button></a>
		</td>
		{/if}
	</tr>
	{{# } }}
</script>
{include file="public/footer" /}